<!--  -->
<template>
  <div class="lucency">
    <van-popup v-model="getSucceed" round :style="{ height: '65%',width:'75%' }" >
      <div class="succeed-mian">
        <div class="container flex-j-c flex-a-c">
          <h3>领取成功！</h3>
          <div class="flex coupon-flex" v-if="$route.name =='new_CouponShareGet'">
            <div class="coupon-btn"  @click="goMyCoupon">我的优惠券</div>
          </div>
          <div class="flex coupon-flex" v-else >
            <div class="coupon-btn"  @click="goMyCoupon">我的优惠券</div>
            <div class="receive-btn" @click="goConponCenter">领券中心</div>
          </div>
        </div>
        <div class="close" @click.stop="lucencyClose">
          <i class="iconfont icon-adsystem_icon_cancle" ></i>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
  export default {
  name:'',
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props:{
    getSucceed:Boolean
  },
  model: {
      prop: 'getSucceed',		// 默认值为value
      event: 'update:getSucceed'		// 默认值为input
  },
  // emits: ['update:getSucceed'],
  data() {
  return {
    
  };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goMyCoupon() {
      if(this.$route.name =='new_CouponShareGet'){
        this.$router.push(this.fun.getUrl("new_coupon", {}));
        return
      }
      this.$router.push(this.fun.getUrl("coupon", {}));
    },
    goConponCenter() {
      this.$router.push(this.fun.getUrl("couponStore", { info: this.info }));
    },
    lucencyClose() {
      this.$emit("update:getSucceed", false);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.lucency ::v-deep .van-popup {
  background: transparent;
}
.succeed-mian {
  width:100%;
  height: 100%;
  position: relative;
  .container {
    width:100%;
    height: 100%;
    flex-direction: column;
    background: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/couponV2/receive-bg.png') top center no-repeat;
    background-size: contain;
    h3 {
      font-size: 1.6875rem;
      padding:1.25rem 0 0 0;
      font-weight: 800;
      color: #670D16;
      text-align: center;
    }
    .coupon-flex {
      width:52%;
      flex-direction: column;
      .coupon-btn {
        font-weight: 500;
        color: #FFFFFF;
        font-size: 0.9375rem;
        line-height: 0.9375rem;
        background: linear-gradient(178deg, #FFC8B4 0%, #FF3653 100%);
        border-radius: 1.3125rem;
        padding:0.7813rem 0;
        margin:1.3125rem 0 0.9375rem;
      }
      .receive-btn {
        color: #FF3653;
        font-size: 0.9375rem;
        line-height: 0.9375rem;
        font-weight: 500;
        padding:0.7813rem 0;
        border-radius: 1.3125rem;
        border: 0.0625rem solid #FF3653;
      }
    }
    
  }
  .close {
    position: absolute;
    bottom:0px;
    left:50%;
    transform: translateX(-50%);
    .iconfont {
      font-size: 2.5rem;
      color:#D6D6DC;
    }
  }
}
</style>